<!DOCTYPE html>
 <html>
 <head>
 	<title>无缝滚动</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 	<div class="box">
 		<ul class="boxSonUl">
	 		<li>1</li>
	 		<li>2</li>
	 		<li>3</li>
	 		<li>4</li>
	 		<li>5</li>
	 		<li>6</li>
	 		<li>7</li>
	 		<li>8</li>
 		</ul>
 		<div class="boxArrow">
	 		<a href="javascript:;"> < </a>
	 		<a href="javascript:;"> > </a>
 		</div>
 	</div>
 </body>
 <script src="jquery-3.2.1.min.js"></script>
 <script type="text/javascript">
 $(function() {
 	var ulWidth = $('.boxSonUl').width();
    var num=0;
 	function same(number){
        num++
 		$('.boxSonUl').animate({'marginLeft':number},'show',function(){

	 		$(this).css('marginLeft',0).append("<li>"+ (num+8) +"</li>").find('li:first').remove();
	 	})	
 	}
 	/*定时器*/
 	var time=setInterval(function(){
 		same(100);
 	},1000)
 	/*移入关闭定时器*/
 	$('.box').hover(function(){
 		clearInterval(time)
 	},function(){
 		time = setInterval(function(){
 		    same(-100);
 	    },1000)
 	})
  })
 </script>
 </html>